<template>
  <div class="box">
    <div class="header">
      <van-nav-bar
        title="找回密码"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="conent">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="userName"
          label="用户名"
          clearable
          placeholder="用户名"
          :right-icon="userTip"
        />
        <van-field
          v-model="tel"
          name="tel"
          label="手机号"
          clearable
          placeholder="手机号"
          :right-icon="telTip"
          @input = 'smse'
        />
        <van-field
          v-model="sms"
          name="code"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
          :right-icon="smsTip"
        >
          <template #button>
            <van-button size="small" plain hairline type="info" native-type="button" :disabled = "smsctip" @click="sendcode">{{yzmbtn}}</van-button>
          </template>
        </van-field>
        <van-field
          v-model="password"
          type="password"
          name="password"
          clearable
          label="新密码"
          placeholder="新密码"
          :right-icon="passwordTip"
        />
        <van-field
          v-model="password1"
          type="password"
          clearable
          label="确认新密码"
          placeholder="重新输入新密码"
          :right-icon="passwordTip1"
        />
        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit" :disabled = "submitctip">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, Field, Button, NavBar, Toast } from 'vant'
import { findsendMsg, changepsd } from '../../api/index.js'

Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(NavBar)
Vue.use(Toast)
export default {
  data () {
    return {
      username: '',
      password: '',
      tel: '',
      sms: '',
      yzmbtn: '发送验证码',
      t: '',
      s: 60,
      smsctip: true,
      password1: ''
    }
  },
  methods: {
    onSubmit (val) {
      changepsd({
        userName: this.username,
        tel: this.tel,
        code: this.sms,
        password: this.password
      }).then(res => {
        console.log(res.data)
        switch (res.data.state) {
          case 201:
            Toast('用户名或手机号不正确')
            break
          case 202:
            Toast('验证码不正确')
            break
          case 200:
            Toast({
              message: '密码找回成功',
              onClose: () => {
                this.$router.push('/login')
              }
            })
            break
        }
      })
    },
    onClickLeft () {
      this.$router.back()
    },
    smse () {
      if (this.telTip === 'success') {
        this.smsctip = false
      } else {
        this.smsctip = true
      }
    },
    sendcode () {
      this.smsctip = true
      const that = this
      this.yzmbtn = this.s-- + 's后重新发送'
      this.t = setInterval(function () {
        if (that.s <= 0) {
          clearInterval(that.t)
          that.s = 60
          that.yzmbtn = '发送验证码'
          that.smsctip = false
        } else {
          that.yzmbtn = that.s-- + 's后重新发送'
        }
      }, 1000)
      findsendMsg({
        tel: this.tel,
        userName: this.username
      }).then(res => {
        console.log(res.data)
        if (res.data.state === 201) {
          Toast('该用户名或手机号未注册')
        } else {
          Toast('验证码发送成功')
        }
      })
    }
  },
  computed: {
    userTip () {
      if (/^.{2,8}$/.test(this.username)) {
        return 'success'
      } else {
        return ''
      }
    },
    telTip () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip () {
      if (/^\w{6,12}$/.test(this.password)) {
        return 'success'
      } else {
        return ''
      }
    },
    smsTip () {
      if (/^\d{4}$/.test(this.sms)) {
        return 'success'
      } else {
        return ''
      }
    },
    submitctip () {
      if (this.userTip && this.telTip && this.passwordTip && this.smsTip && this.passwordTip1) {
        return false
      } else {
        return true
      }
    },
    passwordTip1 () {
      if (this.password === this.password1 && this.password !== '') {
        return 'success'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss">
.van-dialog__confirm{
    background: #ff2000;
  }
</style>
